<template>
  <div>
    <el-container class="tree" :style="{ height: contentHeight + 'px' }">
      <el-aside class="tree-aside" width="25%">
        <el-input v-model="treeFilterText"
         placeholder="输入名称搜索" prefix-icon="el-icon-search"
         :maxlength="treeFilterInputMaxLength" :show-word-limit="treeFilterFocus"
         @focus="treeFilterFocus = true" @blur="treeFilterFocus = false"
         clearable>
        </el-input>
        <el-tree class="filter-tree tree-aside__tree" ref="manageTree"
         node-key="id" default-expand-all highlight-current
         :data="treeData" :props="treeOptions"
         :expand-on-click-node="false"
         :filter-node-method="nodeFilterHandle"
         @node-click="nodeHandle">
        </el-tree>
      </el-aside>
      <el-container class="tree-container">
        <el-header class="tree-container__header tree-container__title">
          <div class="tree-container__title-content">
            <span>{{ treeNode.label }}</span>
            <el-button icon="el-icon-edit-outline" v-show="nodeEditShow" @click="treeEditHandle" circle></el-button>
          </div>
        </el-header>
        <el-header class="tree-container__header tree-container__btn"
         :style="treeOptions.headBtnGroupClass" :height="treeOptions.headBtnGroupWidth">
          <slot name="headBtnGroup"></slot>
        </el-header>
        <el-main class="tree-container__main" :style="treeOptions.mainGroupClass">
          <slot name="mainGroup"></slot>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'tree-manage-content',
  props: {
    treeData: {
      type: Array,
      default: () => [{}]
    },
    treeOptions: {
      type: Object,
      children: '',
      label: '',
      targetField: '', // 目标字段
      ignoreFieldValue: '', // 忽略字段值
      editShow: false,
      headBtnGroupClass: '', // 头部按钮组样式
      headBtnGroupWidth: '43px',
      mainGroupClass: '' // 主体样式
    }
  },
  data() {
    return {
      treeFilterText: '',
      treeFilterFocus: false,
      treeFilterInputMaxLength: 10,
      treeNode: {
        id: 0,
        label: '',
        parentId: 0,
        targetFieldValue: ''
      }
    }
  },
  computed: {
    contentHeight: {
      get () { return this.$store.getters.mainContentHeight }
    },
    nodeEditShow: {
      get() {
        let show = true
        if (this.treeOptions.targetField && this.treeOptions.targetField.length > 0 &&
          this.treeOptions.ignoreFieldValue && this.treeOptions.ignoreFieldValue.length > 0) {
          show = this.treeNode.targetFieldValue !== this.treeOptions.ignoreFieldValue
        }
        return this.treeOptions.editShow && show
      }
    }
  },
  created() {},
  watch: {
    treeData() {
      if (this.treeData.length > 0) {
        this.$nextTick(() => {
          this.$refs.manageTree.setCurrentKey(this.treeData[0].id)
          this.nodeHandle(this.treeData[0])
        })
        let maxLength = 0
        this.treeData.forEach(item => {
          let labelLength = item[`${this.treeOptions.label}`]
          if (labelLength.length > maxLength) {
            maxLength = labelLength.length
          }
        })
        this.treeFilterInputMaxLength = maxLength
      }
    },
    treeFilterText(val) {
      this.$refs.manageTree.filter(val)
    }
  },
  methods: {
    nodeHandle(node) {
      this.clickInfoSave(node)
      this.$emit('nodeHandle', { 'backData': this.treeNode })
    },
    nodeFilterHandle(value, data) {
      if (!value) return true
      return data[`${this.treeOptions.label}`].indexOf(value) !== -1
    },
    clickInfoSave(node) {
      if (node) {
        this.treeNode = { id: node.id, label: node[`${this.treeOptions.label}`], parentId: node.parentId, targetFieldValue: node[`${this.treeOptions.targetField}`] }
      }
    },
    treeEditHandle() {
      this.$emit('treeEditHandle', { 'backData': this.treeNode })
    }
  }
}
</script>

<style lang="scss" scoped>
.tree {
  padding: 5px 0;

  &-aside {
    border-right: 1px solid #dfdfdf;
    padding-top: 10px;
    padding-right: 5px;

    &__tree {
      margin-top: 10px;
    }
  }
  &-container {
    padding-left: 5px;

    &__title {
      text-align: left;

      &-content {
        margin-top: 15px;
        font-size: 20px;

        span{
          font-family: PingFangSC-Medium;
          font-weight: 600;
          color: #1E1E1E;
          letter-spacing: 0;
        }
        > button {
          border: none;
          margin-top: -4px;
          &:hover,
          &:focus {
            background-color: transparent;
          }
        }
      }
    }
    &__header {
      border-bottom: 1px solid #dfdfdf;
    }
    &__btn {
      background-color: #eee;
      margin-bottom: 5px;
      line-height: 50px;
      padding: 0 10px;
      text-align: right;
    }
    &__main {
    }
  }
}
</style>
